<template>
  <div id="chart">
    <el-card shadow="always">
      <!-- card body -->
      <div id="bar">
        <div id="barExpression" class="bar"></div>
        <div id="barAttitude" class="bar"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {}
  },
  methods: {
    getCharts() {
      const myChart = echarts.init(document.getElementById('barExpression'))
      /** @type EChartsOption */
      const option = {
        title: {
          text: '当前班级表情识别结果',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: { data: ['features'] },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //     restore: {},
        //     dataView: {},
        //     dataZoom: {},
        //     magicType: {
        //       type: ['bar', 'line']
        //     }
        //   }
        // },
        xAxis: {
          type: 'category',
          data: ['😀', '😮', '😭', '🤬', '🤢', '😨', '😦', '😐'],
          // axisLabel: {
          //   inside: true,
          //   color: '#fff'
          // },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#999'
          }
        },
        series: [
          {
            // name: 'expression',
            data: [10, 12, 15, 8, 7, 11, 13, 2],
            type: 'bar',
            // 柱子宽度
            barWidth: '50%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },
    getChartsAttitude() {
      const myChartAttitude = echarts.init(
        document.getElementById('barAttitude')
      )
      /** @type EChartsOption */
      const optionAttitude = {
        title: {
          text: '当前班级姿态识别结果',
          textStyle: {
            color: 'blue',
            fontSize: '20'
          }
        },
        // 控制缩放
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: { data: ['features'] },
        toolbox: {
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            dataZoom: {},
            magicType: {
              type: ['bar', 'line']
            }
          }
        },
        xAxis: {
          type: 'category',
          data: ['正常听讲', '举手', '书写', '站立', '俯身']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'features',
            data: [12, 20, 15, 8, 7],
            type: 'bar',
            // 柱子宽度
            barWidth: '50%',
            color: ['#47D7F4']
          }
        ]
      }
      myChartAttitude.setOption(optionAttitude)
    },
  },
  mounted() {
    this.getCharts()
    this.getChartsAttitude()

  }
}
</script>

<style lang="less" scoped>
.el-card {
  margin-top: 30px;
  #bar {
    display: flex;
    justify-content: space-around;
    .bar {
      height: 600px;
      width: 600px;
    }
  }
  #pie {
    display: flex;
    justify-content: space-around;
    .pie {
      height: 600px;
      width: 600px;
    }
  }
  #rose {
    display: flex;
    justify-content: space-around;
    .rose {
      height: 600px;
      width: 600px;
    }
  }
}
</style>
